<template>
  <el-slider
    :modelValue="val"
    :range="ui.range"
    :size="ui.size"
    :step="ui.step"
    :show-input="ui.showInput"
    :show-input-controls="ui.showInputControls"
    :show-tooltip="ui.showTooltip"
    :show-stops="ui.showStops"
    :max="ui.max"
    :min="ui.min"
    :disabled="ui.disabled"
    :marks="marks"
    @update:model-value="updateValue"
  />
</template>
<script lang="ts" setup name="lc-sf-slider">
import { computed, inject } from "vue";
import { SliderUI } from "../interface";
import { SFService } from "../sf.service";
import { NzSafeAny, TItemOption } from "../type";
const props = defineProps<TItemOption<SliderUI>>();
const sf = inject<SFService>("sf-service");
const val = computed(() => {
  return sf.getVaule(props.keyPath);
});
const marks = computed(
  () => props.service.getUI<SliderUI>().marks as NzSafeAny
);
const ui = props.service.getUI<SliderUI>();
const updateValue = (val: number) => {
  if (ui.change) {
    ui.change(val);
  }
  sf.setVaule(props.keyPath, val);
};
</script>

<style />
../types
